import React, { useState, useEffect } from 'react';
import { Space, Table, Tag, Button, Popconfirm, message, Input, Spin, Image, Modal } from 'antd';
import { CheckOutlined, CloseOutlined, EyeOutlined } from '@ant-design/icons';
import { getUserList, resetUserPassword } from '@/api/manage';

const { Search } = Input;

function UserWorkReview() {
    const [expanded, setExpanded] = React.useState(false);

    const [loading, setLoading] = useState(false);
    const [isRefresh, setIsRefresh] = useState(false);
    const [data, setData] = useState([]);
    const [isPreviewVisible, setIsPreviewVisible] = useState(false);
    const [selectedArticle, setSelectedArticle] = useState(null);

    const columns = [
        {
            title: '作品ID',
            dataIndex: 'workId',
            key: 'workId',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '用户ID',
            dataIndex: 'userId',
            key: 'userId',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '作品标题',
            dataIndex: 'workTitle',
            key: 'workTitle',
            render: (text) => <span>{text}</span>,
        },
        // {
        //   title: '作品内容',
        //   dataIndex: 'workContent',
        //   key: 'workContent',
        //   render: (text) => <span>{text}</span>
        // },
        // {
        //   title: '作品图片',
        //   dataIndex: 'workImage',
        //   key: 'workImage',
        //   render: (url) => (
        //     <Image
        //       width={80}
        //       src={url}
        //       preview={{ mask: '预览' }}
        //       style={{
        //         borderRadius: 4,
        //         objectFit: 'cover'
        //       }}
        //     />
        //   )
        // },
        {
            title: '提交时间',
            dataIndex: 'submitTime',
            key: 'submitTime',
            render: (text) => <span>{text}</span>,
        },
        // {
        //   title: '状态',
        //   dataIndex: 'status',
        //   key: 'status',
        //   render: (status) => {
        //     let color = 'green';
        //     let text = '正常';
        //     if(status === 0){
        //       color = 'red';
        //       text = '禁用';
        //     }
        //     return (
        //       <Tag color={color} key={status}>
        //         {text}
        //       </Tag>
        //     );
        //   }
        // },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button
                        type="link"
                        icon={<EyeOutlined />}
                        onClick={() => {
                            setSelectedArticle(record);
                            setIsPreviewVisible(true);
                        }}
                    >
                        预览
                    </Button>
                    <Button type="link" success>
                        <CheckOutlined />
                        审核通过
                    </Button>
                    <Popconfirm
                        title="审核不通过"
                        description="确定要驳回该作品吗?"
                        onConfirm={() => {
                            /* 审核逻辑 */
                        }}
                    >
                        <Button type="link" icon={<CloseOutlined />} style={{ color: '#ff4d4f' }}>
                            驳回
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    // 处理查询逻辑
    const onSearch = (value) => {
        if (value === '') {
            return message.error('查询内容不能为空');
        }
        setLoading(true);
        getUserList(value)
            .then((res) => {
                if (res.code === 200) {
                    setData(res.data);
                    message.success('查询成功');
                }
            })
            .finally(() => setLoading(false));
    };

    useEffect(() => {
        setLoading(true);
        getUserList()
            .then((res) => {
                if (res.code === 200) {
                    setData(res.data);
                }
            })
            .finally(() => setLoading(false));
    }, [isRefresh]);

    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                gap: 16,
            }}
        >
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 10,
                }}
            >
                <div
                    style={{
                        fontWeight: 'bold',
                        fontSize: 16,
                    }}
                >
                    查找作品:
                </div>
                <Search
                    placeholder="输入作品名称搜索"
                    onSearch={onSearch}
                    enterButton
                    style={{
                        width: 300,
                    }}
                />
            </div>
            <Table columns={columns} dataSource={data} loading={loading} rowKey="userId" />
            <Modal
                title="文章预览"
                open={isPreviewVisible}
                onCancel={() => setIsPreviewVisible(false)}
                footer={null}
                width={800}
            >
                {selectedArticle && (
                    <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
                        <h3>{selectedArticle.workTitle}</h3>
                        <div style={{ margin: '16px 0' }}>
                            {selectedArticle.workImage && (
                                <Image width={200} src={selectedArticle.workImage} preview={{ mask: '放大查看' }} />
                            )}
                        </div>
                        <pre
                            style={{
                                whiteSpace: 'pre-wrap',
                                fontFamily: 'inherit',
                                lineHeight: 1.6,
                            }}
                        >
                            {selectedArticle.workContent}
                        </pre>
                    </div>
                )}
            </Modal>
        </div>
    );
}

export default UserWorkReview;
